<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td {
            border : 1px solid rgb(241, 232, 232);
        }
        th {
            border : 1px solid rgb(241, 232, 232);
        }
    </style>
</head>
<body>
    <div id="app" style="margin-top:10%">
        <table align="center" cellspacing="0px" style="height: 300px; width: 800px;">
            <tr align="left" style="background-color:whitesmoke; color:gray">
                <th></th>
                <th style="padding-left : 20px">书籍名称</th>
                <th style="padding-left : 20px">出版日期</th>
                <th style="padding-left : 20px">价格</th>
                <th style="padding-left : 20px">购买数量</th>
                <th style="padding-left : 20px">操作</th>
            </tr>
            <tr v-for="(element, index) in items">
                <td width="50px" style="padding-left : 20px">{{index + 1}}</td>
                <td style="padding-left : 20px">{{element.name}}</td>
                <td style="padding-left : 20px">{{element.date}}</td>
                <td style="padding-left : 20px">￥{{element.price.toFixed(2)}}</td>
                <td style="padding-left : 20px">
                    <input type="button" value="-" v-on:click="subtract(index)"/>
                    <span v-model="totalPrice">{{element.number}}</span>
                    <input type="button" value="+" v-on:click="add(index)"/>
                </td>
                <td style="padding-left : 20px">
                    <input type="button" value="移除" v-on:click="remove(index)"/>
                </td>
            </tr>
        </table>
        <div style="margin-left : 200px;">总价格:￥{{totalPrice.toFixed(2)}}</div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el : "#app",
        data : {
            items : [
                {
                    name : "《java编程思想》",
                    date : "2020-9",
                    price : 98.00,
                    number : 1
                },
                {
                    name : "《数据分析与数据原理》",
                    date : "2019-2",
                    price : 39.00,
                    number : 1
                },
                {
                    name : "《Hadoop权威指南》",
                    date : "2019-10",
                    price : 59.00,
                    number : 1
                },
                {
                    name : "《代码大全》",
                    date : "2018-8",
                    price : 128.00,
                    number : 1
                }
            ],
            totalPrice : 0,
        },
        methods : {
            subtract(index){
                this.items[index].number -= 1;
                if(this.items[index].number == 0){
                    this.remove(index)
                }else{
                    update();
                }
            },
            add(index){
                this.items[index].number += 1;
                update();
            },
            remove(index){
                if(confirm("是否移除")){
                    this.items.splice(index, 1);
                    update();
                }
            }
        }
    })
    
    function update(){
        var totalPrice = 0
        for (item of app.items){
        totalPrice += item.price * item.number;
        }
        app.totalPrice = totalPrice;
    }
    update();
    
</script>
</html>